<template>
	<view class="cu-modal" :class="canvasFlag?'':'show'" @tap="canvasCancelEvn()">
		<view class="cu-dialog" style="background: transparent;  width: 375rpx" >
			<view class="bg-img" style="height:667rpx; background: transparent;">
				<view class="bg-img all-box" style="background-image: url('https://test.hrycf.com/hryxcx/sharebg.png');height:667rpx; width: 375rpx; margin: 0 auto;">
					<image class="project-img" :src="posterObj.url" mode="widthFix" style="width: 288rpx; border-radius: 10rpx;margin-top: 78rpx;"></image>
					<view class="bg-img content-box" style="background-image: url('https://test.hrycf.com/hryxcx/WechatIMG2601.png');height:501rpx; width: 357rpx; margin: 0 auto;">
						<view class="title">
							{{posterObj.title}}
						</view>
						<view style="margin: 14rpx 0 22rpx 0;">
							{{posterObj.discountPrice}}
						</view>
						<!-- <image class="code-img" :src="posterObj.code" mode="widthFix"></image> -->
						<view class="qrcode">
							<view class='container'>
								<image  mode="scaleToFill" :src="imagePath"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar justify-end text-orange">
					<view class="action" @tap="canvasCancelEvn()">
						<text class="cuIcon-close "></text>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-orange flex">
				<view class="action margin-0 flex-sub  solid-left" @tap.stop="saveCanvasImage()">保存图片</view>
				<button class="action margin-0 flex-sub  solid-left bg-orange text-sm" open-type="openSetting" v-show="auth"  @tap.stop="auth=false">权限设置</button>
			</view>
		</view>
	</view>
	<!-- 海报(想让海报显示隐藏要用hidden，v-if关闭后没办法在完整的出来海报) 保存海报按钮和关闭按钮 在html代码中写出来 绑定点击方法然后透明 再用canvas 覆盖 -->
</template>

<script>
	import qrCode from '../../common/qrCode.js'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				auth: false,
				canvasHidden: false,
				imagePath: '',
				inviteCode:'',
				jiaoyanCode:"https://www.hrycf.com?invite="+''
			}
		},
		computed:{
			...mapGetters(['hasLogin'])
		},
		props: {
			canvasFlag: {
				type: Boolean,
				default: true,
			},
			posterObj: {
				type: Object,
				default: {
					url: 'https://img0.zuipin.cn/mp_zuipin/poster/hch-pro.jpg', //商品主图
					icon: 'https://img0.zuipin.cn/mp_zuipin/poster/hch-hyj.png', //会员价图标
					title: "好融艺", //标题
					discountPrice: "250.00", //折后价格
					orignPrice: "300.00", //原价
					code: 'https://test.hrycf.com/hryxcx/hrycode.png', //小程序码
				}
			}
		},
	   
		methods: {
			// 海报
			// 画圆角矩形 ctx、x起点、y起点、w宽度、h高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
			roundRect(ctx, x, y, w, h, r, fillColor, strokeColor, btn) {
				// 开始绘制
				ctx.beginPath()
				// 绘制左上角圆弧 Math.PI = 180度
				// 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				// 绘制border-top
				// 移动起点位置 x终点、y终点
				ctx.moveTo(x + r, y)
				// 画一条线 x终点、y终点
				ctx.lineTo(x + w - r, y)
				// 绘制右上角圆弧
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				// 绘制border-right
				ctx.lineTo(x + w, y + h - r)
				// 绘制右下角圆弧

				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

				// 绘制左下角圆弧

				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

				// 绘制border-left
				ctx.lineTo(x, y + r)
				if (btn == 'btn') {
					const grd = ctx.createLinearGradient(0, 0, 200, 0) //渐变色
					grd.addColorStop(0, fillColor)
					grd.addColorStop(1, strokeColor)
					// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
					ctx.setFillStyle(grd)
					// 对绘画区域填充
					ctx.fill()
				} else {

					if (fillColor) {
						// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
						ctx.setFillStyle(fillColor)
						// 对绘画区域填充
						ctx.fill()
					}
					if (strokeColor) {
						// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
						ctx.setStrokeStyle(strokeColor)
						// 画出当前路径的边框
						ctx.stroke()
					}
				}
				// 关闭一个路径
				ctx.closePath()
				// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
				ctx.clip()
			},
			/**
			 * canvas绘图相关，把文字转化成只能行数，多余显示省略号
			 * ctx: 当前的canvas
			 * text: 文本
			 * contentWidth: 文本最大宽度
			 * lineNumber: 显示几行
			 */
			canvasMultiLineText(ctx, text, contentWidth, lineNumber) {
				var textArray = text.split(""); // 分割成字符串数组
				var temp = "";
				var row = [];
				for (let i = 0; i < textArray.length; i++) {
					if (ctx.measureText(temp).width < contentWidth) {
						temp += textArray[i];
					} else {
						i--; // 这里添加i--是为了防止字符丢失
						row.push(temp);
						temp = "";
					}
				}
				row.push(temp);

				// 如果数组长度大于2，则截取前两个
				if (row.length > lineNumber) {
					var rowCut = row.slice(0, lineNumber);
					var rowPart = rowCut[1];
					var test = "";
					var empty = [];
					for (var a = 0; a < rowPart.length; a++) {
						if (ctx.measureText(test).width < contentWidth) {
							test += rowPart[a];
						} else {
							break;
						}
					}
					empty.push(test); // 处理后面加省略号
					var group = empty[0] + '...'
					rowCut.splice(lineNumber - 1, 1, group);
					row = rowCut;
				}
				return row;
			},
			//获取我自己的邀请码
			async getPersonInfo() {
				this.userInfo = await this.$apis.getPerson();
				this.inviteCode=this.userInfo.invite
				
				wx.showLoading({
					title: '海报生成中...'
				})
				if(this.userInfo.invite){
					this.jiaoyanCode="https://www.hrycf.com?invite="+this.userInfo.invite
				}else{
					this.jiaoyanCode="https://www.hrycf.com?invite="+''
				}
				console.log(this.jiaoyanCode)
				const ctx = wx.createCanvasContext('myCanvas');
				ctx.width = 750;
				ctx.height = 1334;
				ctx.draw() //清空原来的画图内容
				ctx.save();
				ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
				ctx.save();
				ctx.restore();
				let size = this.setCanvasSize(); //动态设置画布大小
				this.createQrCode(this.jiaoyanCode, "canvasImg", size.w, size.h,ctx);	
			},
            //适配不同屏幕大小的canvas
            setCanvasSize(){
            	var size = {};
            	try {
            		var res = wx.getSystemInfoSync();
            		var scale = 750 / 200; //不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小
            		var width = res.windowWidth / scale;
            		var height = width; //canvas画布为正方形
            		size.w = width;
            		size.h = height;
            	} catch (e) {
            		// Do something when catch error
            		console.log("获取设备信息失败" + e);
            	}
				console.log(size)
            	return size;
            },
            /**
             * 绘制二维码图片
             */
            createQrCode(url, canvasId, cavW, cavH,ctx) {
				console.log(url)
            	//调用插件中的draw方法，绘制二维码图片
				setTimeout(()=>{
					qrCode.api.draw(url, canvasId, cavW, cavH);
				},1000)
            
            	setTimeout(() => {
            		this.canvasToTempImage(ctx);
            	}, 1000);
            },
            /**
             * 获取临时缓存照片路径，存入data中
             */
            canvasToTempImage(ctx) {
				console.log(this.posterObj, 'posterObj')
				// this.canvasFlag=false;
				// this.deliveryFlag = false;//关闭分享的弹窗
				let _this = this;
				this.phoneH = 1334;
				this.phoneW = 750;
				let x = ctx.width / 2; //canvas宽的一半
				let url = this.posterObj.url; //商品主图
				let code = this.posterObj.code
            	wx.canvasToTempFilePath({
            		canvasId: 'canvasImg',
            		success: function(res) {
            			var tempFilePath = res.tempFilePath;
            			console.log(tempFilePath);
            			_this.imagePath = tempFilePath
						//将网络图片转成本地路径 背景图
						wx.getImageInfo({
							src: 'https://test.hrycf.com/hryxcx/sharebg.png',
							success: (res) => {
								ctx.save();
								//覆盖绘制
								//问题：在微信小程序使用canvas绘制圆角图片时，微信调试工具正常显示，android真机都不显示。
								// 原因：因为ctx.clip()剪切区域使用的填充颜色是透明的，所以图片没出来。
								// 解决方案：将剪切区域设置成实体颜色就好了。
								ctx.drawImage(res.path, 0, 0, _this.phoneW, _this.phoneH); //绘制图
								ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
								ctx.draw(true)
								// 项目图
								wx.getImageInfo({
									src: url,
									success: (res) => {
										ctx.save();
										_this.roundRect(ctx, 88, 156, 575, 303, 10, '#f7f7f7', '#f7f7f7') //绘制图片圆角背景
										ctx.drawImage(res.path, 88, 156, 575, 303); //绘制图
										ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
										ctx.draw(true)
										// 信封图
										wx.getImageInfo({
											src: 'https://test.hrycf.com/hryxcx/WechatIMG2601.png',
											success: (res) => {
												ctx.save();
												ctx.drawImage(res.path, 19, 274, 715, 1002); //绘制图
												ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
												ctx.draw(true)
												// 海报商品title
												setTimeout(() => {
													ctx.setGlobalAlpha(1) //不透明
													ctx.setFillStyle('#323232') //文字颜色：默认黑色
													ctx.setFontSize(42) //设置字体大小，默认10
													ctx.font = 'normal bold 42px sans-serif';
													ctx.textAlign = "center"; //文字居中
													let text = _this.posterObj.title;
													let row = _this.canvasMultiLineText(ctx, text, x, 2); //计算绘制的2行文本
													let textLineHeight = 98; // 一行文字加一行行间距
													for (let b = 0; b < row.length; b++) { //一行一行绘制文本
														ctx.fillText(row[b], x, 548);
														ctx.draw(true)
													}
												}, 500)
												// 海报商品title end
												//绘制价格
												let zpPrice = _this.posterObj.discountPrice; //会员价格
												ctx.setFontSize(24) //设置字体大小，默认10
												ctx.setFillStyle('#323232') //文字颜色：默认黑色
												ctx.font = 'normal 24px sans-serif';
												ctx.textAlign = "center"; //文字居中
												ctx.fillText(zpPrice, x, 617);
												console.log(_this.imagePath)
												// 小程序码
												wx.getImageInfo({
													src: _this.imagePath,
													success: (res) => {
														ctx.drawImage(res.path, 171, 684, 408, 408)
														ctx.draw(true)
														console.log('我已经绘制完成')
														setTimeout(() => {
															wx.hideLoading();
														}, 1000)
													},
													fail: () => {
														_this.canvasFlag = true;
														uni.showToast({
															title: '海报生成失败',
															duration: 2000,
															icon: 'none'
														});
						
													}
												})
												// 小程序码end
											},
											fail: () => {
												_this.canvasFlag = true;
												uni.showToast({
													title: '海报生成失败',
													duration: 2000,
													icon: 'none'
												});
											}
										})
									},
									fail: () => {
										_this.canvasFlag = true;
										uni.showToast({
											title: '海报生成失败',
											duration: 2000,
											icon: 'none'
										});
									}
								})
						
							},
							fail: () => {
								_this.canvasFlag = true;
								uni.showToast({
									title: '海报生成失败',
									duration: 2000,
									icon: 'none'
								});
							}
						})
            		},
            		fail: function(res) {
            			console.log(res);
            		}
            	});
            },
			// 生成海报
			createCanvasImage() {
				if(this.hasLogin){
					this.getPersonInfo()
				}
			},

			// 保存到系统相册
			saveCanvasImage() {
				let _this = this;
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									_this.saveImage()
								},fail(res){
									_this.auth = true
									uni.showToast({
										title: '请点击前往权限设置',
										duration: 2000,
										icon: 'none'
									})
								}
							})
						} else{
							_this.saveImage()
						}
					}
				})
			},
			saveImage(){
				let _this = this;
				wx.showLoading({
						title: '保存中...'
					})
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 750, // 画布的宽
						height: 1334, // 画布的高
						destWidth: (this.phoneW - 100) * 5,
						destHeight: (this.phoneH - 120) * 5,
						canvasId: 'myCanvas',
						success(res) {
							// 2-保存图片至相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res2) {
									wx.hideLoading();
									uni.showToast({
										title: '图片保存成功到您的相册',
										duration: 2000,
										icon: 'none'
									})
									_this.canvasCancelEvn();
								},
								fail() {
									uni.showToast({
										title: '保存失败，稍后再试',
										duration: 2000,
										icon: 'none'
									})
									wx.hideLoading();
								}
							})
						},
						fail() {
							uni.showToast({
								title: '保存失败，稍后再试',
								duration: 2000,
								icon: 'none'
							})
							wx.hideLoading();
						}
				})
			},
			// 取消海报
			canvasCancelEvn() {
				console.log()
				this.$emit('cancel', true)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		text-align: center;
		height: 100%;
	}
    
	.all-box {
		position: relative;

		.content-box {
			position: absolute;
			top: 137rpx;
			left: 10rpx;
			font-size: 12rpx;
			padding: 115rpx 34rpx 0;

			.title {
				font-size: 21rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: rgba(50, 50, 50, 1);
			}

			.code-img {
				width: 204rpx;
			}
		}
	}

	.canvas_box {
		.canvas_box_mask {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 9;
		}

		.canvas {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			display: block !important;
			width: 100% !important;
			height: 100% !important;
			z-index: 9;
		}

		.button-wrapper {
			width: 320rpx;
			height: 72rpx;
			position: absolute;
			bottom: 20rpx;
			left: 215rpx;
			z-index: 16;
		}

		.save_btn {
			font-size: 30rpx;
			line-height: 72rpx;
			color: #fff;
			width: 100%;
			height: 100%;
			text-align: center;
			border-radius: 45rpx;
			border-radius: 36rpx;
			z-index: 10;
		}

		.canvas_close_btn {
			position: fixed;
			top: 30rpx;
			right: 0;
			z-index: 12;

		}
	}
	.qrcode{
		width: 100%;
	}
	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	
	.container image {
		width: 200rpx;
		height: 200rpx;
		background-color: #f9f9f9;
	}
	
</style>
